import React, {useState,useEffect} from 'react'
import { Table,  Space,Switch,Button, Input, message,Tabs} from 'antd';
import { getli,removb} from '@/api/index';

const { TabPane } = Tabs;

function onChange(checked) {
  console.log(`switch to ${checked}`);
}
function call(key) {
  console.log(key)
}
function BargainListPage(props) {
 
  
   //渲染数据
   const columns = [
    {
      title: 'id',
      dataIndex: 'id',
    
    },
    {
      title: '砍价图片',
      dataIndex: "img",
      render: img => <img style={{ width: 55, height: 55 }} src={img} alt="" />
    },
    {
      title: '砍价价格',
      dataIndex: "price",
     
    },
    {
      title: '砍价商品名称',
      dataIndex: 'user',
    
    },
    {
      title: '状态',
    
      
      dataIndex: 'caozuo',
      render: tags => (
        <>
         <Switch defaultChecked onChange={onChange} />
        </>
      ),
    },
    {
      title: '结束时间',
    
      dataIndex: 'times',
    },
    {
      title: '操作',
     
      render: (text, record) => (
        <Space size="middle">
        
          <Button onClick={() => { del(record.id) }}>删除</Button>
          
        </Space>
        
      ),
    
    },
  ];
  
  
  
  //渲染数据列表
  const [shopdata, setshopdata] = useState([])
    useEffect(() => {
        getShopList()
    },[])
    const getShopList = () => {
      getli().then(res => {
        console.log(res)
            setshopdata(res.data)
        })
    }
   //删除数据
   const del= (id) => {
    console.log(id)
    removb({ id }).then(res => {
        console.log(res)
        getShopList()
    })
    //删除成功提示
    message.success('删除成功！');
}

   
  return <div>
          <p>时间选择：</p>
      <Tabs onChange={call} type="card">

    <TabPane tab="全部" key="1">
    <div >
          
        <div>
        
        <Space direction="vertical">
       
  </Space>,
        

        </div>
        
        <div >
        <Table columns={columns} dataSource={shopdata} />
  
        </div>
        
      </div>
    </TabPane>
    <TabPane tab="今天" key="2">
    今天
    </TabPane>
    <TabPane tab="昨天" key="3">
    昨天
    </TabPane>
    <TabPane tab="最近7天" key="4">
    最近7天
     </TabPane>
     <TabPane tab="最近30天" key="5">
     最近30天
     </TabPane>
     <TabPane tab="本月" key="6">
     本月
     </TabPane>
     <TabPane tab="本年" key="7">
     本年
     </TabPane>
  </Tabs>,
  </div>;
}
export default BargainListPage;
